<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <!-- 在compile中，如果遇到v-for会先将v-for内的节点全部生成好，再作为子节点append到父节点上，
      因此第一步就是判断是否包含v-for指令  -->
    <ul id="example-1">
      <li id="example-2" vfor="item in items">
        {{item.message}}
      </li>
    </ul>
    <button onclick="change()">click me</button>
</body>
<script>
  const scope = { items: [1,2,3,4,5] };
  function change(){
    var str = document.getElementById("example-2").getAttribute('vfor');
    console.log(str)
    const list = str.split('in')
    // let a = 'items'
    // console.log(scope.items)//[1,2,3,4,5]
    // console.log(listStr,"---")//items
    // console.log(typeof listStr)//string
    console.log(scope[list[1]])//undefined
    for(var i = 0 ; i < scope.items.length ; i++){
      var node = document.createElement("LI");
      var textnode = document.createTextNode(scope.items[i]);
      node.appendChild(textnode);
      document.querySelector("#example-1").appendChild(node);
    }
  }
</script>
</html>